<template>
	<view class="box-color box-padding">
		<view class="u-m-b-30 u-font-32">开票商品明细</view>
		<!-- 订单详情列表 -->
		<u-collapse  event-type="close"  :head-style="{'padding':0}" :accordion="false">
			<u-collapse-item :index="index" :name="item.id"  @change="itemChange" v-for="(item, index) in goodsList" :key="item.id" style="margin-bottom: 20rpx;">
					<view class="  u-p-t-24 u-p-b-24  u-flex u-row-between" slot="title-all" style="background-color: #fff;width: 100%;">
						<view class="">
							<view class="u-font-30" style="color: #333333;">{{item.tradeNo}}</view>
							<view class="u-m-t-10 u-m-b-10">
								<text class="u-font-24" style="color: #999999;">{{$u.timeFormat(item.createdTime,'yyyy-mm-dd hh:MM')}}</text>
								<text class="u-font-24 " style="color: #FF551A;margin-left: 30rpx;">{{orderStatus[item.state]}}</text>
							</view>
							<view class="u-font-32" style="color: #FF551A;">￥{{item.actualAmount}}</view>
						</view>
						<view class="">
							<image src="/static/order/payorderOpen.png" :class="{'payorder-list-image':true,'payorder-list-image-active':openList[index]}" ></image>
						</view>
					</view>
				<view class="collapse-item u-p-l-35 u-p-r-35 u-p-t-10 u-p-b-20" style="background-color: #FFFFFF;">
					<view class="u-flex u-row-between u-m-b-20" v-for="orderItem in item.items" :key="orderItem.id">
						<view class="u-flex u-col-top">
							<image :src="orderItem.url" mode="" style="width: 80rpx;height: 80rpx;"></image>
							<text class="u-font-28 u-m-l-20 u-line-1" style="width: 300rpx;">{{orderItem.itemName}}</text>
						</view>
						<view class="u-flex u-flex-wrap u-row-right" style="height: 100%;align-content: space-between;">
							<view class="u-font-28" style="color: #333;width: 100%;text-align: right;">￥{{orderItem.actuallyPrice}}</view>
							<view class="u-font-24 u-flex u-col-bottom  u-row-center" style="background-color: #F7F7F7;color: #999;padding: 7rpx 14rpx;">
								x{{orderItem.quantity}}
							</view>
						</view>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
		<!-- <view class="u-flex u-m-b-20" style="align-items: stretch;" v-for="(item, index) in lessList" :key="index">
			<view>
				<image :src="item.url" style="width: 120rpx;height:120rpx;border-radius: 10rpx;" mode=""></image>
			</view>
			<view class="u-m-l-20" style="flex:1;">
				<view class="u-flex u-row-between u-m-b-20">
					<text>{{ item.itemName }}</text>
					<text>￥{{ item.price }}</text>
				</view>
				<view class="u-flex u-row-between">
					<view class="grey-box" style="height: 50rpx;line-height:50rpx">{{ item.specification }}</view>
					<view class="grey-box" style="height: 50rpx;line-height:50rpx">x{{ item.quantity }}</view>
				</view>
			</view>
		</view>
		<transition name="fade">
			<view v-show="showMore">
				<view class="u-flex u-m-b-20" style="align-items: stretch;" v-for="(item, index) in moreList" :key="index">
					<view>
						<image :src="item.url" style="width: 120rpx;height:120rpx;border-radius: 10rpx;" mode=""></image>
					</view>
					<view class="u-m-l-20" style="flex:1;">
						<view class="u-flex u-row-between u-m-b-20">
							<text>{{ item.itemName }}</text>
							<text>￥{{ item.price }}</text>
						</view>
						<view class="u-flex u-row-between">
							<view class="grey-box" style="height: 50rpx;line-height:50rpx">{{ item.specification }}</view>
							<view class="grey-box" style="height: 50rpx;line-height:50rpx">x{{ item.quantity }}</view>
						</view>
					</view>
				</view>
			</view>
		</transition>
		<view v-if="goodsList.length > 2" class="u-m-t-10 u-text-center u-border-top u-p-t-25" @click="showMore = !showMore">
			<text v-if="!showMore" class="u-font-30 grey-color">展开更多{{goodsList.length-2}}个明细</text>
			<text v-else class="u-font-30 grey-color">收起明细</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			goodsList: {
				type: Array,
				default: () => { return [] }
			}
		},
		data() {
			return {
				showMore: false,
				orderStatus:['待付款','待发货','待收货','待评价','已完成','已取消'],
				openList:[],
			}
		},
		computed: {
			lessList() {
				return this.goodsList.slice(0, 2)
			},
			moreList() {
				return this.goodsList.slice(2, this.goodsList.length)
			}
		},
		methods: {
			itemChange(data){
				this.$set(this.openList,data.index,data.show)
			},
			more(num) {
				this.showMore = !this.showMore
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fade-leave-active{
		transition: all 0.2s linear;
	}
	.fade-enter-active {
	    transition: all 0.5s linear;
	}
	.fade-enter,.fade-leave-to {
	    opacity: 0;
	}
	.payorder-list-image{
		width: 42rpx;
		height: 42rpx;
		transition:transform .8s ;
	}
	.payorder-list-image-active{
		transform: rotateX(180deg);
		transition:transform .8s ;
	}
</style>
